<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyStore | 一站式应用解决方案</title>
  <!-- 引入 Bootstrap 样式库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
  <!-- 引入自定义样式 -->
  <style>
    .col a{
      text-decoration: none;
      color: black;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" th:href="@{/}">MyStore</a>
    <!-- 搜索框 -->
    <form class="d-flex" method="get" th:action="@{/console/app/search.do}">
      <input class="form-control form-control-lg" type="search" name="data" placeholder="搜索应用" aria-label="Search">
      <button class="btn btn-primary" type="submit">搜索</button>
    </form>
    <!-- 用户图标 -->
    <a href="" th:href="@{/console/user/userCenter.do(userId=*{session.userId})}" onclick="">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
        <path d="M8 8.112a2.112 2.112 0 1 1 0-4.224 2.112 2.112 0 0 1 0 4.224zm0 1.063c-2.08 0-6.4 1.052-6.4 3.168V14h12.8v-1.657c0-2.116-4.32-3.168-6.4-3.168z"/>
        <path fill-rule="evenodd" d="M8 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
      </svg>
    </a>
  </div>
</nav>
<!-- 推荐应用 -->
<div class="container my-4">
  <h3 class="fw-bold mb-3">推荐应用</h3>
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4" >
    <!-- 推荐应用块 -->
    <div class="col" th:each="app:${apps}">
      <a th:href="@{/console/app/info.do(appId=${app.appId})}">
      <div class="card h-100">
        <img src="" style="width: 300px;height:300px" th:src="@{/console/file/image.do(fileModelId=${app.appIcon})}" class="card-img-top" alt="">
        <div class="card-body">
          <h5 class="card-title" th:text="${app.appName}"></h5>
          <p class="card-text" th:text="${app.appDescription}"></p>
        </div>
      </div>
      </a>
    </div>
    <!-- 在此处插入更多推荐应用块 -->
  </div>
</div>
<script th:inline="javascript">
  // 在这里编写JavaScript代码
  var message = [[${msg}]];
  if (message!==undefined&&message!==null&&message!=='')
    alert(message);
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入 Bootstrap JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

